<template>
  <framework title="搜索结果" second-title="Search Result" :bg="require('@/assets/img/search_result.png')"
             :path="[{name:'搜索结果',path:'/searchResult'}]">
    <div class="search-operation">
      <div class="item label">咨询类型</div>
      <div class="item">
        <select class="f2" name="" id="" v-model="search.type">
          <option value="0">所有栏目</option>
          <option value="1">专业团队</option>
          <option value="2">新闻中心</option>
          <option value="3">法律著作</option>
          <option value="4">经典案例</option>
          <option value="5">招贤纳士</option>
        </select>
      </div>
      <div class="item"><input class="f2" v-model="search.title" type="text" placeholder="请输入您想查询的内容！"></div>

      <div class="item">
        <div class="base-button search-button" @click="()=>{page.pageNum=1;searchData()}">搜索</div>
      </div>
    </div>
    <div class="search-result-list">
        <div class="box" v-for="(r,i) in searchResult" :key="i">
            <div class="title ">
                <div class="f1 blood">{{ r.title }}</div>
                <div  v-if="r.showDetail" class="see-more" @click="()=>$router.push({ name: 'AllDetails', query: {id:r.id,type:r.type}})">查看详情</div>
            </div>
            <hr>
           <div v-if="r.update_time" class="f2">{{ r.update_time}}</div>
           <div v-else class="f2">2021-12-12</div>
        </div>
    </div>

    <div class="page">
      <van-pagination v-model="page.pageNum" :items-per-page="page.pageSize"  mode="simple" @change="searchData" :total-items="page.total" />
    </div>
  </framework>
</template>

<script>
import framework from "@/components/framework";
//搜索结果
export default {
  name: "SearchResult",
  data(){
    return{
      currentPage:1,
      search:{
        title:"",
        type:0
      },
      page:{
        pageNum:1,
        pageSize:10,
        total:10
      },
      searchResult:[]
    }
  },
  mounted() {
    if (this.$route.params.title){
      this.search.title = this.$route.params.title;
    }
    this.searchData();
  },
  methods:{
     async searchData(){
       let data = await this.$http.get("/index/searchTable",{
         params:{
           ...this.search,
           page:this.page.pageNum
         }
       })
       this.page.pageNum = data.page;
       this.page.total = data.total;
       this.searchResult = data.data.map(s=>{
         s.showDetail = [2,3,4].findIndex(t=>t==s.type)>=0;
         return s;
       });
       console.log(this.searchResult);
     }
  },
  components: {
    framework
  }
}
</script>

<style lang="less" scoped>
.search-operation {
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: space-between;
  color:#939393;
  margin-bottom: 100px;
  .item{
    padding: 20px;
    width: 30%;
  }
  .label{
  }
  .item:first-child{
    width: 10%;
  }
  input{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #939393;
    padding-left: 20px;
  }
  input:focus {
    outline: none;
  }
  select{
    width: 100%;
    height: 54px;
    border-radius: 5px;
    border: 1px solid #939393;
    padding-left: 20px;
    padding-right: 20px;
  }
  .search-button{
    padding: 16px 100px;
    letter-spacing: 20px;
    cursor: pointer;
  }
}
.page{
  margin: 40px 0;
  padding: 0 20px;
}
.search-result-list{
    width: 100%;
    .box{
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 40px;
        .title{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .see-more{
                color: #993C1A;
                cursor: pointer;
            }
        }
    }
}
</style>

<style lang="less">
@media screen and (min-width:0px) and (max-width:680px) {
  #app {
    .search-operation{
      margin-bottom: 0;
      flex-direction: column;
      border-bottom: 1px solid #dfdfdf;
      .item{
        width: 100%;
        input{
          padding: 0;
          text-indent: 1.5rem;
        }
      }
    }
  }
}
</style>

